Client/src/Pages/Uptime/Home/Components/Host/index.jsx (1)

Line range hint 46-49: Hold up, something's not adding up with these PropTypes!

The percentage prop is being used with a % suffix, suggesting it's a number, but it's typed as a string.

 Host.propTypes = {
   title: PropTypes.string,
   percentageColor: PropTypes.string,
-  percentage: PropTypes.string,
+  percentage: PropTypes.number,
   url: PropTypes.string,
 };

Client/src/Pages/Uptime/Details/Components/Charts/CustomLabels.jsx (1)

Line range hint 14-18: Yo, we need some safety nets here!

Accessing firstDataPoint._id without checking could make your app go boom if the data point is missing.

-				{formatDateWithTz(firstDataPoint._id, dateFormat, uiTimezone)}
+				{firstDataPoint?._id ? formatDateWithTz(firstDataPoint._id, dateFormat, uiTimezone) : ''}

Client/src/Components/Dot/index.jsx (2)

6-14: Yo dawg, let's make these styles more robust, eh?

The styles need a bit of tweaking to be more reliable across different contexts:

• The content property isn't doing anything here since we're using a <span>
• Missing display: inline-block could cause layout inconsistencies

Here's a better way to style it:

 <span
   style={{
-    content: '""',
+    display: "inline-block",
     width: size,
     height: size,
     borderRadius: "50%",
     backgroundColor: color,
     opacity: 0.8,
   }}
 />

---

18-21: These PropTypes are looking a bit loose, buddy!

Consider adding isRequired for essential props and using more specific PropTypes like oneOf for color validation.

Here's a more robust PropTypes definition:

 Dot.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.string,
+  color: PropTypes.oneOf([
+    "gray",
+    "primary",
+    "secondary",
+    "error",
+    "warning",
+    "info",
+    "success"
+  ]),
+  size: PropTypes.string
 };

Client/src/Pages/Uptime/Home/Components/Host/index.jsx (2)

4-4: That import path's deeper than mom's spaghetti, eh?

Consider setting up path aliases to simplify these deep import paths. Instead of using relative paths, you could use something like:

- import Dot from "../../../../../Components/Dot";
+ import Dot from "@components/Dot";

Would you like me to help set up path aliases in your webpack/babel config?

---

30-30: The Dot's looking a bit plain, don't you think?

Since this Dot is being used to indicate status alongside a percentage, we could make it more semantic by passing a color prop that matches percentageColor.

- <Dot />
+ <Dot color={percentageColor} />

Client/src/Pages/Uptime/Details/index.jsx (1)

31-78: Knees weak, arms heavy—ensure we catch errors in custom hooks.
While your custom hooks (useMonitorFetch, useCertificateFetch, useChecksFetch) neatly encapsulate data fetching, it might be beneficial to handle potential errors or warnings inside them. Real-time error handling can protect you from dropping that precious pasta.

Client/src/Pages/Uptime/Details/Components/Charts/ResponseTimeChart.jsx (1)

25-29: Props validation needs more sauce, fam!

The monitor prop type could be more specific to catch potential issues early.

 ResponseTImeChart.propTypes = {
 	shouldRender: PropTypes.bool,
-	monitor: PropTypes.object,
+	monitor: PropTypes.shape({
+		groupedChecks: PropTypes.arrayOf(PropTypes.object)
+	}),
 	dateRange: PropTypes.string,
 };

Client/src/Pages/Uptime/Details/Components/ConfigButton/index.jsx (1)

17-17: Let's make this callback fresh like mom's spaghetti!

The navigation callback should be memoized to prevent unnecessary re-renders.

+	const handleNavigate = useCallback(() => 
+		navigate(`/uptime/configure/${monitorId}`), 
+		[navigate, monitorId]
+	);
+
 	return (
 		<Box alignSelf="flex-end">
 			<Button
 				variant="contained"
 				color="secondary"
-				onClick={() => navigate(`/uptime/configure/${monitorId}`)}
+				onClick={handleNavigate}

Client/src/Pages/Uptime/Details/Hooks/useMonitorFetch.jsx (1)

7-7: Yo, these state names are making me lose myself!

The state setter name setMonitorsIsLoading (plural) doesn't match the state variable monitorIsLoading (singular).

-	const [monitorIsLoading, setMonitorsIsLoading] = useState(false);
+	const [monitorIsLoading, setMonitorIsLoading] = useState(false);

Client/src/Pages/Uptime/Details/Hooks/useChecksFetch.jsx (2)

6-12: Consider adopting TypeScript for better type safety.

The hook accepts multiple parameters that would benefit from TypeScript interfaces, especially for complex objects like dateRange.

---

40-40: Add debouncing for frequent parameter changes.

Consider using useDebounce hook from a utility library like use-debounce to prevent excessive API calls when parameters change frequently.

Client/src/Pages/Uptime/Details/Hooks/useCertificateFetch.jsx (1)

16-42: Optimize certificate fetching with useMemo.

The date formatting operation could be memoized to prevent unnecessary recalculations.

+ import { useMemo } from 'react';
// ... inside the hook
+ const formattedDate = useMemo(() => {
+   if (!res?.data?.data?.certificateDate) return "N/A";
+   return formatDateWithTz(res.data.data.certificateDate, certificateDateFormat, uiTimezone) ?? "N/A";
+ }, [res?.data?.data?.certificateDate, certificateDateFormat, uiTimezone]);

Client/src/Pages/Uptime/Details/Components/TimeFramePicker/index.jsx (1)

23-23: Extract time periods to constants.

Consider moving the time period mappings to constants to improve maintainability.

const TIME_PERIOD_LABELS = {
  day: "24 hours",
  week: "7 days",
  month: "30 days"
};

Client/src/Pages/Uptime/Details/Components/MonitorHeader/index.jsx (1)

33-33: Use URL API for robust URL handling.

Consider using the URL API instead of regex for more robust URL parsing.

- {monitor?.url?.replace(/^https?:\/\//, "") || "..."}
+ {monitor?.url ? new URL(monitor.url).host : "..."}

Client/src/Pages/Uptime/Details/Components/StatusBoxes/index.jsx (1)

77-81: Yo dawg, let's make these prop types more specific!

The monitor prop type is too loose. We should define the exact shape of the monitor object to catch potential issues early.

 StatusBoxes.propTypes = {
   shouldRender: PropTypes.bool,
-  monitor: PropTypes.object,
+  monitor: PropTypes.shape({
+    uptimeStreak: PropTypes.number,
+    timeSinceLastCheck: PropTypes.number,
+    latestResponseTime: PropTypes.number
+  }),
   certificateExpiry: PropTypes.string,
 };

Client/src/Pages/Uptime/Details/Components/Charts/DownBarChart.jsx (1)

Line range hint 56-73: Cleanup needed: Remove that CAIO_REVIEW comment!

Also, that nested ternary operation is making my knees weak. Let's make it more readable.

- fill={
-   hoveredBarIndex === index
-     ? theme.palette.error.main
-     : chartHovered
-       ? theme.palette.error.light
-       : theme.palette.error.main
- }
+ fill={
+   getBarFillColor({
+     isHovered: hoveredBarIndex === index,
+     isChartHovered: chartHovered,
+     theme
+   })
+ }

Add this helper function:

const getBarFillColor = ({ isHovered, isChartHovered, theme }) => {
  if (isHovered) return theme.palette.error.main;
  return isChartHovered ? theme.palette.error.light : theme.palette.error.main;
};

Client/src/Pages/Uptime/Details/Components/ResponseTable/index.jsx (1)

23-55: Performance optimization: Move headers array outside component!

The headers array is being recreated on every render. Let's move it outside to prevent unnecessary recreations.

+ const TABLE_HEADERS = [
+   {
+     id: "status",
+     content: "Status",
+     render: (row) => {
+       const status = row.status === true ? "up" : "down";
+       return (
+         <StatusLabel
+           status={status}
+           text={status}
+           customStyles={{ textTransform: "capitalize" }}
+         />
+       );
+     },
+   },
+   // ... rest of the headers
+ ];

 const ResponseTable = ({
   shouldRender = true,
   checks,
   // ... other props
 }) => {
-  const headers = [ ... ];  // Remove this
   // ... rest of the component
   return (
     <Table
-      headers={headers}
+      headers={TABLE_HEADERS}
       // ... other props
     />
   );
 };

Client/src/Pages/Uptime/Details/Components/Charts/UpBarChart.jsx (1)

Line range hint 7-14: Optimize performance: Memoize getThemeColor function!

This function is being recreated on every render. Let's memoize it using useMemo.

+ import { memo, useState, useMemo } from "react";

- const getThemeColor = (responseTime) => {
+ const useThemeColor = () => useMemo(() => (responseTime) => {
   if (responseTime < 200) {
     return "success";
   } else if (responseTime < 300) {
     return "warning";
   } else {
     return "error";
   }
- };
+ }, []);

 const UpBarChart = memo(({ monitor, type, onBarHover }) => {
+  const getThemeColor = useThemeColor();
   // ... rest of the component

Client/src/Utils/timeUtils.js (1)

80-95: Consider consolidating duration formatting functions.

The new getHumanReadableDuration function has similar functionality to the existing formatDurationSplit function. Both return an object with time and units/format.

Consider consolidating these functions to reduce code duplication:

-export const getHumanReadableDuration = (ms) => {
-	const durationObj = dayjs.duration(ms);
-	if (durationObj.asDays() >= 1) {
-		const days = Math.floor(durationObj.asDays());
-		return { time: days, units: days === 1 ? "day" : "days" };
-	} else if (durationObj.asHours() >= 1) {
-		const hours = Math.floor(durationObj.asHours());
-		return { time: hours, units: hours === 1 ? "hour" : "hours" };
-	} else if (durationObj.asMinutes() >= 1) {
-		const minutes = Math.floor(durationObj.asMinutes());
-		return { time: minutes, units: minutes === 1 ? "minute" : "minutes" };
-	} else {
-		const seconds = Math.floor(durationObj.asSeconds());
-		return { time: seconds, units: seconds === 1 ? "second" : "seconds" };
-	}
-};

+export const formatDurationSplit = (ms) => {
+	const durationObj = dayjs.duration(ms);
+	if (durationObj.asDays() >= 1) {
+		const days = Math.floor(durationObj.asDays());
+		return { time: days, format: days === 1 ? "day" : "days" };
+	} else if (durationObj.asHours() >= 1) {
+		const hours = Math.floor(durationObj.asHours());
+		return { time: hours, format: hours === 1 ? "hour" : "hours" };
+	} else if (durationObj.asMinutes() >= 1) {
+		const minutes = Math.floor(durationObj.asMinutes());
+		return { time: minutes, format: minutes === 1 ? "minute" : "minutes" };
+	} else {
+		const seconds = Math.floor(durationObj.asSeconds());
+		return { time: seconds, format: seconds === 1 ? "second" : "seconds" };
+	}
+};

+export const getHumanReadableDuration = formatDurationSplit;

Client/src/Pages/Uptime/Details/Components/ChartBoxes/index.jsx (3)

16-26: Consider adding prop defaults and destructuring improvements.

The component could benefit from default values for optional props and cleaner prop destructuring.

-const ChartBoxes = ({
-	shouldRender = true,
-	monitor,
-	dateRange,
-	uiTimezone,
-	dateFormat,
-	hoveredUptimeData,
-	setHoveredUptimeData,
-	hoveredIncidentsData,
-	setHoveredIncidentsData,
-}) => {
+const ChartBoxes = ({
+	shouldRender = true,
+	monitor,
+	dateRange,
+	uiTimezone,
+	dateFormat,
+	hoveredUptimeData = null,
+	setHoveredUptimeData = () => {},
+	hoveredIncidentsData = null,
+	setHoveredIncidentsData = () => {},
+}) => {

---

49-51: Simplify complex calculations.

The nested calculations with optional chaining could be simplified for better readability.

-monitor?.groupedUpChecks?.reduce((count, checkGroup) => {
-	return count + checkGroup.totalChecks;
-}, 0) ?? 0

+const totalUpChecks = monitor?.groupedUpChecks?.reduce(
+	(count, { totalChecks }) => count + totalChecks,
+	0
+) ?? 0;

-((monitor?.upChecks?.totalChecks ?? 0) /
-	(monitor?.totalChecks ?? 1)) *
-	100

+const uptimePercentage = (monitor?.upChecks?.totalChecks ?? 0) * 100 / (monitor?.totalChecks ?? 1);

Also applies to: 73-75

---

123-123: Add error boundary for chart components.

The ResponseGaugeChart and other chart components could throw errors if the monitor data is malformed.

Consider wrapping chart components in an error boundary:

import { ErrorBoundary } from 'react-error-boundary';

const ChartErrorFallback = () => (
  <Typography color="error">
    Failed to load chart data
  </Typography>
);

// Usage
<ErrorBoundary FallbackComponent={ChartErrorFallback}>
  <ResponseGaugeChart avgResponseTime={monitor.avgResponseTime ?? 0} />
</ErrorBoundary>

Client/src/Pages/Uptime/Details/Components/Charts/ChartBox.jsx (3)

1-5: Yo dawg, consider moving IconBox closer to its usage!

That deep import path ../../../../../Components/IconBox is making me nervous like mom's spaghetti. Consider moving the IconBox component to a more accessible location, like a shared components directory at a higher level.

---

9-52: These styles are longer than a rap battle, fam!

The styling object is getting pretty hefty. Consider these improvements to keep it clean:

1. Extract the styles into a separate styled component or styles object
2. Replace magic numbers with theme values:

-					fontSize: 15,
+					fontSize: theme.typography.fontSize.small,
-					fontSize: 13,
+					fontSize: theme.typography.fontSize.xs,
-					fontSize: 20,
+					fontSize: theme.typography.fontSize.large,

---

70-75: Prop validation's got the right flow, but let's make it tighter!

Consider adding more specific validation for the height prop to ensure it's a valid CSS value:

-	height: PropTypes.string,
+	height: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number
+	]),

Also, consider adding default props for better documentation:

ChartBox.defaultProps = {
  height: "300px",
  children: null,
};

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro